<script setup>
import { hiprint, defaultElementTypeProvider } from "vue-plugin-hiprint";

const emit = defineEmits();
// 数据
const printConfig = reactive({
  visible: false,
  spinning: true,
  waitShowPrinter: false,
  // 纸张宽 mm
  width: 0,
  height: 0,
  // 模板
  hiprintTemplate: {},
  // 数据
  printData: {},
});
const { proxy } = getCurrentInstance();
const loading = ref(false);
const dialogVisible = ref(false);
const isShow = (hiprintTemplate, printData) => {
  loading.value = true;
  dialogVisible.value = true;
  printConfig.width = hiprintTemplate.lastJson.panels[0].width;
  printConfig.height = hiprintTemplate.lastJson.panels[0].height;
  printConfig.hiprintTemplate = hiprintTemplate;
  printConfig.printData = printData;
  // eslint-disable-next-line no-undef

  setTimeout(async () => {
    $("#preview_content_design1").html(hiprintTemplate.getHtml(printData));
    loading.value = false;
  }, 1000);
};

// 预览中的预览
const isShow1 = (template, printData) => {
  dialogVisible.value = true;
  const hiprintTemplate = new hiprint.PrintTemplate({ template: template });
  loading.value = true;
  printConfig.width = template.panels[0].width;
  printConfig.height = template.panels[0].height;
  printConfig.hiprintTemplate = hiprintTemplate;
  printConfig.printData = printData;
  setTimeout(() => {
    // console.log(hiprintTemplate)
    $("#preview_content_design1").html(hiprintTemplate.getHtml(printData));
    loading.value = false;
  }, 1000);
  // eslint-disable-next-line no-undef
};
// 打印
const print = () => {
  dialogVisible.value = false;
  // proxy.loading('打印中,请稍候...')
  // printConfig.hiprintTemplate.on('printSuccess', function (data) {
  //   setTimeout(() => {
  //     proxy.closeLoading()
  //     emit('printYes')
  //     proxy.successMsg('打印完成')
  //   }, 1000)
  // }) printConfig.printData
  printConfig.hiprintTemplate.print(printConfig.printData, {
    callback: () => {
      // console.log('callback')
    },
  });
};
const toPdf = () => {
  printConfig.hiprintTemplate.toPdf(printConfig.printData, "打印预览pdf");
};

defineExpose({ isShow, printConfig, isShow1 });
</script>

<template>
  <div>
    <p-dialog
      :isBtn="false"
      title="打印预览"
      v-model="dialogVisible"
      @close="dialogVisible = false"
      :width="printConfig.width + 5 + 'mm'"
    >
      <div
        :style="`height:${printConfig.height}mm`"
        class="bodys"
        v-loading="loading"
      >
        <div
          :style="`height:${printConfig.height}mm`"
          id="preview_content_design1"
        ></div>
      </div>
      <div v-if="!loading">
        <div class="Btn">
          <el-button type="success" @click="print">打印</el-button>
          <el-button type="warning" @click="toPdf">打印预览pdf</el-button>
        </div>
      </div>
    </p-dialog>
  </div>
</template>

<style>
.bodys {
  overflow: hidden;
}
</style>
